<div id="projectAdmin">
    <nz-card nzTitle="Settings" class="coloredTitle">
        <form nz-form (ngSubmit)="onSubmitProjectUpdate()" #projectUpdateFrom="ngForm">
            <nz-form-item>
                <nz-form-label [nzSpan]="3">Project name</nz-form-label>
                <nz-form-control>
                    <input nz-input type="text" name="formProjectUpdateName" placeholder="Project name"
                        [(ngModel)]="project.name" [disabled]="loading" required #formProjectUpdateName="ngModel">
                </nz-form-control>
                <nz-alert *ngIf="formProjectUpdateName.invalid && !formProjectUpdateName.pristine" nzType="error"
                    nzMessage="Project name is mandatory and must respect the alphanumeric pattern ([a-zA-Z0-9]*)"></nz-alert>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="3">Description</nz-form-label>
                <nz-form-control>
                    <textarea nz-input name="formProjectUpdateDescription" placeholder="Description"
                        [(ngModel)]="project.description" [disabled]="loading" #formProjectUpdateDescription="ngModel">
                        </textarea>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="3">Icon</nz-form-label>
                <nz-form-control>
                    <div>
                        <img class="proj-icon" [src]="project.icon" alt="project icon" *ngIf="project.icon">
                    </div>
                    <app-upload-button accept=".png,.jpg,.jpeg" image="true"
                        (event)="fileEvent($event)"></app-upload-button>
                    <nz-alert *ngIf="fileTooLarge" nzType="error"
                        nzMessage="Your file is too large (max 100Ko)"></nz-alert>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item nzJustify="end">
                <button nz-button nzType="primary" name="btnrename" [nzLoading]="loading"
                    [disabled]="projectUpdateFrom.invalid">Rename</button>
            </nz-form-item>
        </form>
    </nz-card>
    <nz-card nzTitle="Link to a repository manager" class="coloredTitle">
        <app-repomanager-form *ngIf="apiConfig && !apiConfig.project_vcs_management_disabled"
            [project]="project"></app-repomanager-form>
        <app-project-repomanager-list *ngIf="project.vcs_servers && project.vcs_servers.length > 0" [project]="project"
            [reposmanagers]="project.vcs_servers"></app-project-repomanager-list>
    </nz-card>
    <nz-card nzTitle="Danger zone" class="redTitle">
        <nz-row>
            <nz-col [nzSpan]="12">
                <div class="title">Delete project</div>
                <div class="description">Once you delete a project, there is no going back. Please be certain.</div>
            </nz-col>
            <nz-col [nzSpan]="12" class="alignRight">
                <button nz-button nzDanger nzType="primary" [nzLoading]="loading" nz-popconfirm
                    nzPopconfirmTitle="Are you sure you want to delete this project ?"
                    (nzOnConfirm)="deleteProject()">Delete</button>
            </nz-col>
        </nz-row>
    </nz-card>
</div>
